<!DOCTYPE html>
<!--<html>-->
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>音乐管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="/layui.all.js"></script>
		<link rel="stylesheet" href="/css/layui.css" />
		<link href="/css/Global.css" rel="stylesheet" type="text/css" media="all" />

	</head>

	<body style="">
		<div class="layui-layout" style="">

			<div class="layui-side layui-bg-black" style="overflow-x: visible;">
				<div th:include="/common/common::header"></div>

				<div class="layui-side-scroll">
					<ul class="layui-nav layui-nav-tree site-demo-nav">
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-home" href="/zhl/index" style="font-size: 14px">&nbsp;首页</a>
						</li>

						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-group" href="/zhl/user" style="font-size: 14px">&nbsp;用户管理</a>
						</li>
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-read" href="/zhl/article" style="font-size: 14px">&nbsp;笔记管理</a>
						</li>
						<li class="layui-nav-item layui-this">
							<a class="layui-icon layui-icon-headset" style="font-size: 14px" href="/zhl/music">&nbsp;音乐管理</a>
						</li>
						<li class="layui-nav-item" style="height: 30px; text-align: center"></li>
						<span class="layui-nav-bar" style="top: 67.5px; height: 0px; opacity: 0;"></span>
					</ul>

				</div>
			</div>
			<div class="layui-body site-demo">
				<div class="layui-layout layui-layout-admin">
					<div class="layui-header">
						<ul class="layui-nav layui-layout-left">
							<li class="layui-nav-item">
								<a href="hard.html"><i class="layui-icon layui-icon-chart-screen layui-ico"></i>用户硬件信息</a>
							</li>
							<li class="layui-nav-item">
								<a href="user.html"><i class="layui-icon layui-icon-group layui-ico"></i>第三方登陆</a>
							</li>
						</ul>
						<ul class="layui-nav layui-layout-right">
							<li class="layui-nav-item">
								<a href="javascript:;">
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<i class="layui-icon layui-icon-set-fill layui-ico"></i>
								</a>
								<dl class="layui-nav-child">
									<dd>
										<a href="">设置</a>
									</dd>
									<dd>
										<a href="">退出</a>
									</dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<table class="layui-hide" id="musics" lay-filter="musics"></table>
			</div>
			<div class="site-tree-mobile layui-hide">
				<i class="layui-icon">&#xe602;</i>
			</div>
			<audio  id="playMusic" controls="controls" loop="false" hidden="true">

			<!--定义-->
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs" href="/zhl/music_edit.html">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>
			<!--这里的d是指每一条数据-->
			<script type="text/html" id="checkPublish">
				<input type="checkbox" name="close" lay-skin="switch" value="{{d.url}}" lay-text="试听|关闭" class="publish" lay-filter="idPublish" {{ d.publish==0 ? 'checked' : '保存' }}>
			</script>

			<script>

				layui.use('table',function () {
				    var table = layui.table,
						form = layui.form;

				    table.render({
						elem: '#musics',
						url: '/data/music.json',
						cellMinWidth: 80,
						cols: [
                            [{
                                type: 'numbers',
                                title: '序号',
                                width: 80
                            }, {
                                field: 'title',
                                title: '歌曲'
                            }, {
                                field: 'singer',
                                title: '演唱'
                            },  {
                                field: 'publish',
                                title: '试听',
                                width: 100,
                                templet: '#checkPublish',
                                unresize: true
                            },{
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 150
							}]
                        ],
                        page: true
					});
					
					//监听行工具事件
					table.on('tool(musics)', function(obj) {
						var data = obj.data;
						//console.log(obj)
						if(obj.event === 'del') {
							layer.confirm('真的要删除吗', function(index) {
								obj.del();
								layer.close(index);
							});
						} else if(obj.event === 'edit') {
							layer.prompt({
								formType: 2,
								value: data.email
							}, function(value, index) {
								obj.update({
									email: value
								});
								layer.close(index);
							});
						}
					});

                    //试听
                    form.on('switch(idPublish)', function(val) {

                        if(this.checked) {
                            $("#playMusic").attr("src",val.value);
                            var myAuto = document.getElementById('playMusic').play();

                        } else {
                            $("#playMusic").attr("src",val.value);
                            var myAuto = document.getElementById('playMusic').stop();
                        }

                    });

                });

			</script>
	</body>

</html>